<template>
  <n-layout has-sider>
    <n-layout-sider :width="200">
      <AppMenu />
    </n-layout-sider>
    <n-layout>
      <n-layout-header>颐和园路</n-layout-header>
      <n-layout-content content-style="padding: 24px">
        <n-data-table :columns="columns" :data="list" :pagination="pagination" />
      </n-layout-content>
      <!-- <n-layout-footer>成府路</n-layout-footer> -->
    </n-layout>
  </n-layout>
</template>

<script lang="tsx" setup>
import AppMenu from './components/AppMenu.vue'
import { h, defineComponent, ref, onMounted } from 'vue'
import { NTag, NButton } from 'naive-ui'
import { getUsers } from './api/user'
import type { IUser } from './api/types/user'

// const message = useMessage()

const createColumns = (options: {
  sendMail: (row: IUser) => void
}) => {
  return [
    {
      title: '编号', // 表头列名
      key: 'id' // 绑定的数据
    },
    {
      title: '姓名',
      key: 'name'
    },
    // {
    //   title: 'Address',
    //   key: 'address'
    // },
    // {
    //   title: 'Tags',
    //   key: 'tags',
    //   render (row) {
    //     const tags = row.tags.map((tagKey) => {
    //       return h(
    //         NTag,
    //         {
    //           style: {
    //             marginRight: '6px'
    //           },
    //           type: 'info'
    //         },
    //         {
    //           default: () => tagKey
    //         }
    //       )
    //     })
    //     return tags
    //   }
    // },
    {
      title: 'Action',
      key: 'actions',
      render (row: IUser) {
        return (
          <NButton size="small" onClick={() => options.sendMail(row)}>
            操作
          </NButton>
        )
        // return h(
        //   NButton,
        //   {
        //     size: 'small',
        //     onClick: () => sendMail(row)
        //   },
        //   { default: () => 'Send Email' }
        // )
      }
    }
  ]
}

const list = ref<IUser[]>([]) // 列表数据
  const columns = createColumns({
  sendMail (rowData) {
    // message.info('send mail to ' + rowData.name)
    console.log(rowData)
  }
})

const pagination = {
  pageSize: 10
}

onMounted(() => {
  loadList()
})

const loadList = async () => {
  const { data } = await getUsers()
  list.value = data.users
}
</script>

<style>
.n-layout {
  height: 100%;
}

.n-layout-header,
.n-layout-footer {
  background: rgba(128, 128, 128, 0.2);
  padding: 24px;
}

.n-layout-sider {
  background: rgba(128, 128, 128, 0.3);
}

.n-layout-content {
  background: rgba(128, 128, 128, 0.4);
}
</style>
